<!doctype html>
<head>
    <title>人脸识别</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
<br>
<video autoplay id="source_vid" style="width:50%;height:auto"></video>
<br>
<canvas id="output" style="display:none;"></canvas>
<script type="text/javascript" charset="utf-8">
        var show = document.getElementById('show_point');

        var video = document.getElementById('source_vid');
        var canvas = document.getElementById('output');
        var context = canvas.getContext('2d');

        window.URL = window.URL || window.webkitURL; // 获取到window.URL对象
        var success = function(stream){
            // video.src = window.URL.createObjectURL(stream);
             //兼容webkit核心浏览器
            let CompatibleURL = window.URL || window.webkitURL;
            //将视频流设置为video元素的源
            video.srcObject = stream;
        }

        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.mozGetUserMedia || navigator.msGetUserMedia;
        navigator.getUserMedia({video:true, audio:false}, success, console.log);

        // 人脸识别
        function face_identify(form){
            var req = new XMLHttpRequest();
            req.onreadystatechange = function(){
                if(req.readyState==4&&req.status==200){
                    // 请求成功
                    var obj = req.responseText;
                    if(obj!=""){
                        alert(""+obj);
                    }else{
                        alert("查找相似人脸失败，是否已保存模板？");
                    }
                }
            };
            req.open("post", "identify", true);
            req.send(form);
        }
        function face_num(){
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video,0,0, canvas.width, canvas.height);
            // Converts canvas to an image
            var imageDate = canvas.toDataURL("image/jpeg", 0.5);
            var form = new FormData();
            form.append("file_date",imageDate.substr(23));
            var req = new XMLHttpRequest();
            req.onreadystatechange = function(){
                if(req.readyState==4&&req.status==200){
                    // 请求成功
                    var obj = req.responseText;
                    if(obj==1){
                        alert("已找到人脸，正在人脸检索，请稍后...");
                        face_identify(form)
                    }else{
                        setTimeout(face_num,500);
                    }
                }
            };
            req.open("post", "face_num", true);
            req.send(form);

        }

        setTimeout(face_num,2000);

</script>
</body>
